<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>会员登录</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
		<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/include.js" ></script>
		<!-- 引入自定义css文件 style.css -->
		<link rel="stylesheet" href="css/style.css" type="text/css" />

		<style>
			body {
				margin-top: 20px;
				margin: 0 auto;
			}
			
			.carousel-inner .item img {
				width: 100%;
				height: 300px;
			}
			
			.container .row div {
				/* position:relative;
	 float:left; */
			}
			
			font {
				color: #666;
				font-size: 22px;
				font-weight: normal;
				padding-right: 17px;
			}
		</style>
	</head>

	<body>
				<div id="header"></div>
	
		<div class="container" style="width:100%;height:460px;background:#FF2C4C url('images/loginbg.jpg') no-repeat;">
			<div class="row">
				<div class="col-md-7">
					<!--<img src="./image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">-->
				</div>

				<div class="col-md-5">
					<div id="loginForm" style="width:440px;border:1px solid #E7E7E7;padding:20px 0 20px 30px;border-radius:5px;margin-top:60px;background:#fff;">
						<font>会员登录</font>USER LOGIN

						<div>&nbsp;</div>
						<form class="form-horizontal">

							<div class="form-group">
								<label for="username" class="col-sm-2 control-label">用户名</label>
								<div class="col-sm-6">
									<input type="text" v-model="username" class="form-control" id="username" placeholder="请输入用户名">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
								<div class="col-sm-6">
									<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
								<div class="col-sm-3">
									<input type="text" id="vcode2" class="form-control" placeholder="请输入验证码">
								</div>
								<div class="col-sm-3">
									<img id="vcode" src="http://127.0.0.1:8092/ShopManagement/user/getVeriFicationCode" />
								</div>

							</div>
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<div class="checkbox">
										<label>
          <input type="checkbox"> 自动登录
        </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<label>
          <input type="checkbox"> 记住用户名
        </label>
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<input type="button" id="loginButton" width="100" value="登录" name="submit" border="0" style="background: url('./images/login.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height:35px;width:100px;color:white;">
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<div style="margin-top:50px;">
			<img src="./image/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势" />
		</div>

		<div style="text-align: center;margin-top: 5px;">
			<ul class="list-inline">
				<li>
					<a>关于我们</a>
				</li>
				<li>
					<a>联系我们</a>
				</li>
				<li>
					<a>招贤纳士</a>
				</li>
				<li>
					<a>法律声明</a>
				</li>
				<li>
					<a>友情链接</a>
				</li>
				<li>
					<a target="_blank">支付方式</a>
				</li>
				<li>
					<a target="_blank">配送方式</a>
				</li>
				<li>
					<a>服务声明</a>
				</li>
				<li>
					<a>广告声明</a>
				</li>
			</ul>
		</div>
		<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
			Copyright &copy; 2005-2016 天虎商城 版权所有
		</div>
	</body>
	<script type="text/javascript" src="js/vue.js" ></script>
	<script type="text/javascript" src="js/axios.min.js"></script>
	<script type="text/javascript" src="js/header.js" ></script>
	<script>
		var loginForm = new Vue({
			el: "#loginForm",
			data: {
				username: $("#username").val(),
			},
			methods: {

			},
			mounted: function() {
				$("#loginButton").click(function() {
					var data = {
						username: $("#username").val(),
						password: $("#inputPassword3").val(),
						code: $("#vcode2").val(),
					}
					if(data.username == "") {
						alert("用户名不能为空");
						return false;
					} else if(data.password == "") {
						alert("密码不能为空");
						return false;

					} else if(data.code == "") {
						alert("验证码不能为空");
						return false;
					}
					axios({
						url: "/ShopManagement/user/login",
						method: "post",
						params: data,
					}).then(function(response) {
						alert(response.data.message);
						if(response.data.result) {
							window.location.replace("index.html");
						} else {
							changeCodePic();
						}
					}).catch(function(reason) {
						console.log("请求失败");
					});

				});

				//点击验证码图片获得验证码
				$("#vcode").click(function() {
					changeCodePic();
				});
			}
		});
	</script>

</html>